<template>
    <div class="border-2 p-1 w-full">
        <div class="text-xl font-bold p-2 w-full" @click="onHomeList">
            <span>正在热映</span><span>({{hotDataInfo['count']}})</span>
            <i class="text-xl font-bold">></i>
        </div>
        <div class="flex flex-wrap">
            <div class="flex-col w-1/4 p-0.5" v-for="item in hotDataInfo.movies">
            <!-- 卡片海报 -->
            <img class="h-1/2" :src="item['poster']" alt="">
            <!-- 电影标题 -->
            <p>{{item['title']}}</p>
        </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref,onMounted, toRefs } from 'vue'
// 唯有useRouter拥有path方法
import { useRouter } from 'vue-router'

export default defineComponent({
    // 定义props拿父组传过来的参数
    props:{
        hotDataInfo:{
            default:() => []
        }
    },
    setup(props: { hotDataInfo: any }){
        const {hotDataInfo} = toRefs(props)

        // 定义一个router用来调整路径地址
        const router:any = useRouter()
        function onHomeList(){
            router.push({
                path:'/homeList',
                // 路由带个参值
                query:{
                    stata:0
                }
            })
        }
        return{
            hotDataInfo,
            onHomeList,
        }
    }
})

</script>